<template>
  <view class="gui-swiper-card-wrap">
    <swiper
      :autoplay="autoplay"
      :circular="true"
      class="gui-swiper-card"
      :current="currentIndex"
      :indicator-dots="false"
      :interval="interval"
      :next-margin="spacing + 'rpx'"
      :previous-margin="spacing + 'rpx'"
      :style="{
        width: width + 'rpx',
        height: heightIn + 'rpx',
      }"
      @change="swiperchange"
    >
      <swiper-item v-for="(item, index) in swiperItems" :key="index" class="gui-swiper-card-item gui-border-box">
        <navigator
          v-if="item.opentype !== 'click'"
          class="gui-swiper-card-nav gui-transition-all"
          hover-class="none"
          :open-type="item.opentype"
          :style="{
            paddingLeft: current !== index ? padding + 'rpx' : '0rpx',
            paddingRight: current !== index ? padding + 'rpx' : '0rpx',
            paddingTop: current !== index ? paddingY + 'rpx' : '0rpx',
            paddingBottom: current !== index ? paddingY + 'rpx' : '0rpx',
          }"
          :url="item.url"
        >
          <image
            class="gui-swiper-card-image gui-transition-all"
            :mode="imgMode"
            :src="item.img"
            :style="{
              borderRadius: borderRadius,
              width: current !== index ? widthInSamll + 'rpx' : widthIn + 'rpx',
              height: current !== index ? heightInSmall + 'rpx' : heightIn + 'rpx',
              opacity: current !== index ? opacity : 1,
            }"
          />
        </navigator>
        <view
          v-if="item.opentype === 'click'"
          class="gui-swiper-card-nav gui-transition-all"
          :data-index="index"
          hover-class="none"
          :style="{
            paddingLeft: current !== index ? padding + 'rpx' : '0rpx',
            paddingRight: current !== index ? padding + 'rpx' : '0rpx',
            paddingTop: current !== index ? paddingY + 'rpx' : '0rpx',
            paddingBottom: current !== index ? paddingY + 'rpx' : '0rpx',
          }"
          @tap.stop="taped"
        >
          <image
            class="gui-swiper-card-image gui-transition-all"
            :mode="imgMode"
            :src="item.img"
            :style="{
              borderRadius: borderRadius,
              width: current !== index ? widthInSamll + 'rpx' : widthIn + 'rpx',
              height: current !== index ? heightInSmall + 'rpx' : heightIn + 'rpx',
              opacity: current !== index ? opacity : 1,
            }"
          />
        </view>
        <view
          v-if="indicatorType === 'number'"
          class="gui-indicator-dot-numbers gui-flex gui-row gui-nowrap"
          :class="indicatorBarBgClass"
          :style="{
            height: indicatorBarHeight + 'rpx',
            'border-bottom-left-radius': borderRadius,
            'border-bottom-right-radius': borderRadius,
            width: current !== index ? widthInSamll + 'rpx' : widthIn + 'rpx',
            left: current !== index ? padding + 'rpx' : '0rpx',
            bottom: current !== index ? paddingY + 'rpx' : '0rpx',
          }"
        >
          <text
            class="gui-indicator-dot-text"
            :style="{
              paddingLeft: '20rpx',
              fontStyle: 'italic',
              color: titleColor,
            }"
          >
            {{ index + 1 }}
          </text>
          <text
            class="gui-indicator-dot-text"
            :style="{
              fontSize: '36rpx',
              color: titleColor,
            }"
          >
            /
          </text>
          <text
            class="gui-indicator-dot-text"
            :style="{
              fontSize: '28rpx',
              paddingRight: '20rpx',
              fontStyle: 'italic',
              color: titleColor,
            }"
          >
            {{ swiperItems.length }}
          </text>
          <text
            class="gui-swiper-text gui-block-text gui-flex1 gui-ellipsis"
            :style="{
              color: titleColor,
              fontSize: titleSize,
              height: indicatorBarHeight + 'rpx',
              lineHeight: indicatorBarHeight + 'rpx',
            }"
          >
            {{ item.title }}
          </text>
        </view>
      </swiper-item>
    </swiper>
    <!--  进度圆点  -->
    <view
      v-if="indicatorType === 'dot'"
      class="gui-indicator-dots gui-flex gui-row gui-nowrap gui-align-items-center gui-border-box"
      :style="{
        width: width + 'rpx',
        height: indicatorBarHeight + 'rpx',
        position: indicatorPosition,
        paddingLeft: spacing + 'rpx',
        paddingRight: spacing + 'rpx',
        'justify-content': indicatorDirection,
      }"
    >
      <view class="gui-indicator-dots-wrap gui-flex gui-row gui-nowrap gui-justify-content-center">
        <view
          v-for="(item, index) in swiperItems"
          :key="index"
          :class="['gui-indicator-dot', current === index ? 'dot-show' : '', current === index ? indicatorActiveClass : indicatorClass]"
          :style="{
            width: current !== index ? indicatorWidth + 'rpx' : indicatorActiveWidth + 'rpx',
            height: indicatorHeight + 'rpx',
            borderRadius: indicatorRadius + 'rpx',
          }"
        />
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'GuiSwiper',
  props: {
    width: { type: Number, default: 750 },
    height: { type: Number, default: 300 },
    swiperItems: {
      type: Array,
      default: function () {
        return []
      },
    },
    borderRadius: { type: String, default: '10rpx' },
    indicatorBarHeight: { type: Number, default: 68 },
    indicatorBarBgClass: {
      type: Array,
      default: function () {
        return ['gui-bg-black-opacity5']
      },
    },
    indicatorWidth: { type: Number, default: 18 },
    indicatorActiveWidth: { type: Number, default: 18 },
    indicatorHeight: { type: Number, default: 18 },
    indicatorRadius: { type: Number, default: 18 },
    indicatorClass: {
      type: Array,
      default: function () {
        return ['gui-bg-gray', 'gui-dark-bg-level-5']
      },
    },
    indicatorActiveClass: {
      type: Array,
      default: function () {
        return ['gui-bg-primary']
      },
    },
    indicatorType: { type: String, default: 'dot' },
    indicatorPosition: { type: String, default: 'absolute' },
    indicatorDirection: { type: String, default: 'center' },
    // #ifndef APP-NVUE
    spacing: { type: Number, default: 50 },
    // #endif
    // #ifdef APP-NVUE
    spacing: { type: Number, default: 0 },
    // #endif
    // #ifdef APP-NVUE
    padding: { type: Number, default: 0 },
    // #endif
    // #ifndef APP-NVUE
    padding: { type: Number, default: 26 },
    // #endif
    interval: { type: Number, default: 5000 },
    autoplay: { type: Boolean, default: true },
    currentIndex: { type: Number, default: 0 },
    opacity: { type: Number, default: 0.66 },
    titleColor: { type: String, default: '#FFFFFF' },
    titleSize: { type: String, default: '28rpx' },
    imgMode: { type: String, default: 'aspectFill' },
  },
  emits: ['swiperchange', 'taped'],
  data() {
    return {
      current: 0,
      isReady: false,
      widthIn: 750,
      heightIn: 300,
      widthInSamll: 700,
      heightInSmall: 280,
      paddingY: 0,
    }
  },
  watch: {
    currentIndex: function (val) {
      this.current = val
    },
  },
  created: function () {
    this.current = this.currentIndex
    this.init()
  },
  methods: {
    init: function () {
      // 图片宽高计算
      this.widthIn = this.width - this.spacing * 2
      this.heightIn = (this.height / this.width) * this.widthIn
      this.paddingY = (this.padding * this.height) / this.width
      this.widthInSamll = this.widthIn - this.padding * 2
      this.heightInSmall = this.heightIn - this.paddingY * 2
    },
    swiperchange: function (e) {
      const current = e.detail.current
      this.current = current
      this.$emit('swiperchange', current)
    },
    taped: function (e) {
      this.$emit('taped', e.currentTarget.dataset.index)
    },
  },
}
</script>
<style scoped>
.gui-swiper-card-wrap {
  position: relative;
}
.gui-swiper-card {
  overflow: hidden;
}
.gui-swiper-card-item {
  font-size: 0;
  overflow: hidden;
  line-height: 0;
}
.gui-swiper-card-nav {
  font-size: 0;
  position: relative;
}
.gui-indicator-dots {
  width: 750rpx;
  overflow: hidden;
  z-index: 1;
  left: 0;
  bottom: 0;
}
.gui-indicator-dot {
  margin: 6rpx;
}
.gui-indicator-dots-wrap {
  padding: 0 20rpx;
}
.gui-indicator-dot-text {
  text-align: center;
  line-height: 68rpx;
  padding: 0 4rpx;
  color: #ffffff;
  font-size: 32rpx;
}
.gui-indicator-dot-numbers {
  overflow: hidden;
  align-items: center;
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
}
.gui-swiper-text {
  width: 200rpx;
  line-height: 68rpx;
  padding-right: 25rpx;
  overflow: hidden;
}
/* #ifndef APP-NVUE */
@keyframes dot-show {
  from {
    opacity: 0.1;
  }
  to {
    opacity: 1;
  }
}
.dot-show {
  animation: dot-show 300ms linear forwards;
}
/* #endif */
</style>
